import React, { Component } from 'react';
import {HomeBannerStyled} from 'styled/Home/HomeBannerStyled'
import {homeGetBanner} from 'api/homeApi'


class HomeBanner extends Component {
    constructor(props) {
        super(props);
        this.state={
            bannerData:[]
        }
    }

    componentDidMount() {
        homeGetBanner().then((ok)=>{
            // console.log(ok)
            this.setState({
                bannerData:ok
            })
        })
    }
    
    
    render() {
        return (
            <HomeBannerStyled>
                <div className="wrap">
                    {
                        this.state.bannerData.map((item,index)=>{
                            return (
                                <img key={index} src={item.image.path} alt=""/>
                            )
                        })
                    }
                </div>
                <div className="circle">
                    {
                        this.state.bannerData.map((item,index)=>{
                            return(
                                <span key={index}></span>
                            )
                        })
                    }
                </div>
          </HomeBannerStyled>
        )
      }
}

export default HomeBanner;